<html>
  <head>
    <title>千锋教育——做真实的自己,用心做教育</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style>
      #box {
        width: 350px;
        height: 350px;
        border: 1px solid gray;
        margin: 100px;
        position: relative;
      }

      #mask {
        width: 175px;
        height: 175px;
        background-color: rgba(255, 255, 0, 0.5);
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        cursor: move;
      }

      #bigbox {
        width: 400px;
        height: 400px;
        position: absolute;
        left: 370px;
        top: 0px;
        border: 1px solid green;
        overflow: hidden;
        /* display: none; */
      }
      #bigbox img {
        display: block;
        position: absolute;
      }
    </style>
  </head>

  <body>
    <div id="box">
      <div id="smallbox">
        <img src="./img/001.jpg" alt="" />
        <div id="mask"></div>
      </div>
      <div id="bigbox">
        <img src="./img/0001.jpg" alt="" />
      </div>
    </div>
  </body>
  <script>
    class Magnfnify {
      constructor(box, smallbox, bigbox, mask, bimg,simg) {
        //   初始数据
        // that = this;
        this.box = box;
        this.smallbox = smallbox;
        this.bigbox = bigbox;
        this.mask = mask;
        
        this.bimg = bimg;
        this.simg = simg;
      }
      bindEvents() {
        var that = this;
        //  1、鼠标移出
        this.box.onmouseover = function () {
          that.show();
        };
        //   2. 鼠标移出
        this.box.onmouseout = function () {
          that.hide();
          
        };
        //    3. 鼠标移动
        this.box.onmousemove = function (e) {
          that.move(e);
          //   1. 获取到光标的坐标值（大盒子的）---> 遮罩可以运动到的位置
          //  2. 但是，遮罩的位置在我光标的位置，并不在中心中（需要处理一下）
          // 3. 边界设置（xx  yy）
          // 4.、可以设置给遮罩的left和top值
          // 让大盒子运动（计算比例） 大图可移动的最大距离/小遮罩可移动的最大距离 = 大图应该在位置/小遮罩现在所在的位置
        };
      }
      //放大镜显示
      show() {
        this.mask.style.display = "block";
        this.bigbox.style.display = "block";
      }
      //放大镜隐藏
      hide() {
        this.mask.style.display = "none";
        this.bigbox.style.display = "none";
      }
      //鼠标移动
      move(e) {
        //获取mask的坐标
        var x = e.pageX - this.box.offsetLeft - this.mask.offsetWidth / 2;
        var y = e.pageY - this.box.offsetTop - this.mask.offsetHeight / 2;
        //设置mask的移动边界    
        if (x <= 0) {
          x = 0;
        }
        if (x >= this.box.offsetWidth - this.mask.offsetWidth) {
          x = this.box.offsetWidth - this.mask.offsetWidth-2;
        }
        if (y <= 0) {
          y = 0;
        }
        if(y >= (this.box.offsetHeight - this.mask.offsetHeight)){
          y = this.box.offsetHeight - this.mask.offsetHeight-2
        }

        this.mask.style.left = x + "px";
        this.mask.style.top = y + "px";
       
        //大盒子图片移动
        var xbili = (this.bimg.offsetWidth - this.bigbox.offsetWidth)/(this.box.offsetWidth - this.mask.offsetWidth)
        var ybili = (this.bimg.offsetHeight - this.bigbox.offsetHeight)/(this.box.offsetHeight - this.mask.offsetHeight)
        
        var big_x = xbili*this.mask.offsetLeft;
        var big_y = ybili*this.mask.offsetTop;
        console.log(xbili)
        this.bimg.style.left = - big_x + "px";
        this.bimg.style.top = - big_y + "px";
      }
    }
    var box = document.querySelector("#box");
    var smallbox = document.querySelector("#smallbox");
    var bigbox = document.querySelector("#bigbox");
    var mask = document.querySelector("#mask");
    var simg = smallbox.children[0];
    var bimg = bigbox.children[0];
    console.log(box,smallbox,bigbox,mask,simg,bimg)
    var b = new Magnfnify(box, smallbox, bigbox, mask, bimg, simg);
    b.bindEvents();
    /*
    1. 移入移出-----> 显示和隐藏 遮罩和大盒子
    2. 鼠标移动  鼠标跟随
    3. 限制移动边界
    4. 计算比例，根据比例来进行移动
    */
  </script>
</html>
